<template>
	<view id="leaflet-container">
		
	</view>
</template>

<script>
</script>

<script module="LeafletMap" lang="renderjs">
	import * as L from 'leaflet'
	
	export default {
		mounted() {
			var map = L.map('leaflet-container').setView([51.505, -0.09], 13);
			
			L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
			}).addTo(map);
			
			L.marker([51.5, -0.09]).addTo(map)
			    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
			    .openPopup();
		}
	}
</script>

<style>
	#leaflet-container {
		width: 100%;
		height: 100%;
	}
</style>